import React, {useState} from 'react';

export default function ChildrenOne(props) {
    /**
     * useState:让函数组件拥有状态
     *  1- useState来自于React对象，是一个hooks函数
     *  2- useState接收的值是状态的初始值
     *  3- useState返回的是一个数组，下标0对应的元素是状态的值，下标1对应的元素是修改状态的方法。
     *  4- useState可以调用多次（创建多个状态）
     *  5- 更改状态的行为是异步的：
     *  useState具有缓存的功能。如果不是初次挂载执行函数组件，那么状态的初始值为上一次修改以后的结果。
     *  注意：
     *      类组件中通过this.setState更改状态，如果状态未发生改变，那么render也会执行
     *      即函数组件中的状态值只有发生更改，那么才会重新render
     *      所有的hooks(以use开头的函数）只允许在函数组件中或自定义的hooks函数中调用。
     *      即hooks函数只允许在函数名字首字母大写（函数组件），或函数名字以use开头（hooks)
     */
    const [arr, setArr] = useState([0, 1, 2, 3, 4]);
    // 更改状态的行为是异步的：
    let [num, setNum] = useState(0);
    return (
        <>
            <div>
                <h3>App</h3>
                <button onClick={() => {
                    // 由于引用地址（值）未改变，所以视图不会更新
                    // arr.push(arr.length);
                    // setArr(arr);

                    // 操作数组1
                    // setArr([
                    //     ...arr,
                    //     arr.length
                    // ])

                    // 操作数组2
                    const copyArr = JSON.parse(JSON.stringify(arr));
                    copyArr.push(arr.length);
                    setArr(copyArr);

                }}>{arr}</button>

                <button onClick={() => {
                    /**
                     * 更改状态是异步的：等待所有的状态确定之后，才会重新调用函数组件。
                     */
                    // setNum(100);
                    // console.log(num);// 0

                    // setNum(num++);// setNum(0);
                    // setNum(num++);// setNum(1)
                    // setNum(num++);// setNum(2)

                    // setNum(num + 1);// setNum(1)
                    // console.log(num);// 0
                    // setNum(num + 1);//  setNum(1)
                    // console.log(num);// 0
                    // setNum(num + 1);// setNum(1)
                    // console.log(num);// 0

                    /**
                     * setNum可以接收一个回调函数，回调函数返回的值即是修改状态的值
                     * prevNum:是上一次要修改的状态值（但是状态还未修改）
                     *
                     */
                    // setNum(9);// 准备将状态num,更新为9
                    // setNum((prevNum) => {
                    //     console.log(num, prevNum);// 0 9
                    //     return 100;
                    // })
                    // setNum((prevNum) => {
                    //     console.log(num, prevNum);// 0 100
                    //     return 200;
                    // })

                    // setNum(prevNum => prevNum + 1);// setNum(1)
                    // setNum(prevNum => prevNum + 1);// setNum(2)
                    // setNum(prevNum => prevNum + 1);// setNum(3)
                }}>{num}</button>
            </div>
        </>
    )
}